<template>
    <div id="sysConfiguration">
       <div class="aside">
            <!-- 菜单树 -->
            <SideBar :sideBarList="menubar" :collapse="isCollapse" :activePath="activePath"></SideBar>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // checkList: ['选中且禁用','复选框 A'],
            title: '新增',
            isCollapse:true,//菜单是可折叠
            activePath:'/news',
            menubar:[
                {
                    index:'10',name:'我的任务',path:'/authoritions',child:[]
                },
                {
                   index:'1',name:'新闻通知',path:'/news',child:[]
                },
                {
                    index:'11',name:'营销管理',path:'/news',child:[
                        {
                            index:'2',name:'用水户',path:'/waterusers',child:[]
                        },
                        {
                            index:'12',name:'水表',path:'/news',child:[]
                        },
                        {
                            index:'13',name:'用水量',path:'/news',child:[]
                        }
                    ]
                },{
                    index:'14',name:'工程管理',path:'/waterusers',child:[]
                },{
                    index:'3',name:'设备管理',path:'/devices',child:[]
                },{
                    index:'4',name:'管网分区',path:'/pipes',child:[]
                },{
                    index:'5',name:'运维管理',path:'/maintenances',child:[
                        {
                            index:'15',name:'巡检点',path:'/pipes',child:[]
                        },
                        {
                            index:'16',name:'值班排班',path:'/pipes',child:[]
                        },
                        {
                            index:'17',name:'巡检计划',path:'/pipes',child:[]
                        },
                        {
                            index:'18',name:'巡检任务',path:'/pipes',child:[]
                        }

                    ]
                },{
                    index:'19',name:'知识库',path:'/pipes',child:[]
                },{
                    index:'10',name:'模型管理',path:'/',child:[
                        {
                            index:'22',name:'模型参数',path:'/modelParams',child:[]
                        }
                    ]},
                {
                    index:'6',name:'权限管理',path:'',child:[
                        {index:'7',name:'用户管理',path:'/users',child:[]},
                        {index:'20',name:'部门管理',path:'/users',child:[]},
                        {index:'8',name:'权限管理',path:'/authoritions',child:[]},
                        {index:'9',name:'菜单管理',path:'/menus',child:[]}
                    ]
                },{
                    index:'21',name:'配置信息',path:'/users',child:[]
                }
            ],
            selectIds:[],
            allId: '',
            dialogFormVisible: false,
            formData: {
                code: '',
                name: '',
                elevation: '',
                street: '',
                pipeNetwork: '',
                coordinate: '',
                installTime: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            input: '',
            topActiveTab:'home',
            asideListActive:0,
            options: [{
                value: '压力表',
                label: '压力表'
            }, {
                value: '流量计',
                label: '流量计'
            },{
                value: '余氯仪',
                label: '余氯仪'
            },],
            value: '',
            addStatus: [{
                value1: '在线',
                label: '在线'
            }, {
                value1: '离线',
                label: '离线'
            },],
            value1: '',
            formOptions: [{
                value2: '压力表',
                label: '压力表'
            }, {
                value2: '流量计',
                label: '流量计'
            },{
                value2: '余氯仪',
                label: '余氯仪'
            },],
            value2: '',
            tableData: [],
            pageInfo: {
                currentPage: 1,
                pageSize: 12,
                pageTotal: 0
            }
        }
    },
    components:{
        SideBar:() =>  import('@/components/menuBar/SideBar.vue')
    },
    mounted() {
        // this.loadData()
    },
    created() {
        // this.loadData()
    },
    methods:{
        deleteRow(index,row) {
            if(!index && !row){
                //判断selectId是否存在
                if(!this.selectIds){
                    //先勾选
                    return ;
                }else{
                    this.deleteData(idnex,row)
                }
            }else{
                this.deleteData(idnex,row)                 
            }           
      },
        deleteData(index,row) {
            let id = row.id;
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://43.136.137.111:9898/system/pipe/network/batch/delete',{
                        ids: id
                    }).then( res => {
                        this.loadData()
                        // console.log(res,200)
                        // return false
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch( error => {
                        console.log(error,404)
                    })                               
                }).catch(() => {
                
                });
        },
        addData() {
            this.$axios.post('http://43.136.137.111:9898/system/pipe/network/add',{
                name: this.form.name,
                code: this.form.code,
                elevation: this.form.elevation,
                coordinate: this.form.coordinate,
                status: this.value1,
                street: this.form.street,
                pipeNetwork: this.form.pipeNetwork,
                installTime: this.form.installTime,
                type: this.value2
            }).then( res => {
                this.tableData.unshift(this.form)
                if(this.data.code === 200){
                    alert('新增成功！！')
                    this.loadData()
                    console.log(res,200)
                    return false
                }
            }).catch({
                
            })
             
        },
        //顶部的删除数据方法
        deleteData() {
            if(this.selectIds.length == 0){
                this.$message.error('请勾选需要删除的数据项！')
                return false
            }else{
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://43.136.137.111:9898/system/pipe/network/batch/delete',{
                        ids: this.selectIds
                    }).then( res => {
                        this.loadData()
                        console.log(res,200)
                        return false
                    }).catch( error => {
                        console.log(error,404)
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            } 
        },
        // 新增数据
        addData() {
            this.dialogFormVisible = true
            this.form = ''
            this.value1 = ''
            this.value2 = ''
        },
        // 关闭表格弹窗
        handleClose(done){
            this.dialogFormVisible = false
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index,row.id)
            this.dialogFormVisible = true //显示弹窗
            this.form = row //row当前行数据，把当前行的数据赋值给表单
            this.value1 = row.status
            this.value2 = row.type
            //this.coordinate = row.coordinate
            this.allId = row.id //把id存全局
            this.title = '编辑修改'
        },
        // 确定按钮
        dialogVisibleConfirm(){
            // 新增接口
            if(!this.allId) {
                this.$axios.post('http://43.136.137.111:9898/system/pipe/network/add',{
                    //新增需要传递的参数
                    name: this.form.name,
                    code: this.form.code,
                    elevation: this.form.elevation,
                    coordinate: this.form.coordinate,
                    status: this.value1,
                    street: this.form.street,
                    pipeNetwork: this.form.pipeNetwork,
                    installTime: this.form.installTime,
                    type: this.value2,
                }).then( res => {
                    if(this.form.code == ''){
                        this.$confirm('编号不能为空！')
                        return false
                    }else if(this.form.name == ''){
                        this.$confirm('设备名称不能为空！')
                        return false
                    }else if(this.form.elevation == ''){
                        this.$confirm('高程不能为空！')
                        return false
                    }else if(this.value1== ''){
                        this.$confirm('设备状态不能为空！')
                        return false
                    }else if(this.form.street == ''){
                        this.$confirm('地址不能为空！')
                        return false
                    }else if(this.form.pipeNetwork == ''){
                        this.$confirm('管网不能为空！')
                        return false
                    }else if(this.form.installTime == ''){
                        this.$confirm('安装时间不能为空！')
                        return false
                    }else if(this.value2 == ''){
                        this.$confirm('设备类型不能为空！')
                        return false
                    }else{
                        this.tableData.push(this.form)
                        this.$message.success("添加成功");     //新增成功消息提示
                        // this.$refs.refRuleForm.resetFields(); //清空表格数据
                        this.dialogFormVisible = false;           //关闭弹框
                        this.loadData()
                        //this.dialogFormVisible = false
                        //debugger
                        this.loadData()
                        return
                    }
                }).catch(error => {
                    this.$message.error("添加失败");
                    console.log(error,404)
                })
            }else{
                // 修改接口
                let id = this.allId
                this.$axios.post('http://43.136.137.111:9898/system/pipe/network/edit',{
                    // 编辑需要传递的参数
                    id: id,
                    name: this.form.name,
                    code: this.form.code,
                    elevation: this.form.elevation,
                    status: this.value1,
                    street: this.form.street,
                    pipeNetwork: this.form.pipeNetwork,
                    installTime: this.form.installTime,
                    type: this.value2
                }).then( res => {
                    console.log(res,"修改")
                    this.$message.success("修改成功");
                    this.dialogFormVisible = false;
                    this.loadData();
                })
            }
            
        },
        // 重置按钮
        resetData() {
            this.input = ''
            this.value = ''
            this.pageInfo.pageSize = 12
            this.pageInfo.currentPage = 1
            this.loadData()
        },
        loadData() {
            this.$axios.post('http://43.136.137.111:9898/system/pipe/network/list',{
                pageNum: this.pageInfo.currentPage,
                pageSize: this.pageInfo.pageSize,
                name: this.input,
                type: this.value
            }).then( res => {
                this.tableData = res.data.rows
                // console.log(this.tableData)
                this.pageInfo.pageTotal = res.data.total
            }).catch( error => {
                console.log(error, 404)
            })
        },
        toggleTopTab(_path){			
			this.topActiveTab = _path;
			this.asideListActive = 0;
			// this.$emit('changeTab',this.topActiveTab);
			// this.$emit('goPage',_path);
			this.$router.push({
				path:_path
			})
		},
        goPage(_path){
			this.asideListActive = _path;
			if(_path){
			this.$router.push({
				path:_path
			})
			// this.$emit('showChildPage')
			// }
		}},
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            //debugger
			let arr = [];
			val.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
        },
        // 删除
        handleDelete(index, row) {
            console.log(index, row);
        },
         // 分页查询
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageInfo.pageSize = val;
            this.loadData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.currentPage = val;
            this.loadData()
        },
    },
}
</script>

<style lang="less" scoped>
    #sysConfiguration{
        position: relative;
        height: 100%;
        width:100%;
        // min-width: 1920px;	
        box-sizing: border-box;
        padding-top: 112px;
        background-color: #02182d;
        // display: flex;
        // flex-direction: row;

        .aside{
            float: left;
            width: 218px;
            height: 100%;
            overflow: auto;
            background: rgba(11, 117, 216, 0.1);            
        }
        .content{
            margin-left: 220px;
            padding: 0 10px;
            height: 100%;
            // width:auto;
        }
        
    }

</style>